<template>
  <div>
    <div class="modal" v-if="visible" style="width: 320px">
      <div class="header">
        <span>编辑</span>
      </div>
      <div class="body">
        <label for="name">标题</label>
        <input class="form-control" id="name" v-model="nodeForm.name" />
        <label for="type">节点类型</label>
        <select class="form-control" id="type" v-model="nodeForm.type">
          <option
            :key="'node-type-' + item.id"
            :value="item.id"
            v-for="item in [
              { name: '开始', id: 'start' },
              { name: '结束', id: 'end' },
              { name: '普通结点', id: 'operation' }
            ]"
          >
            {{ item.name }}
          </option>
        </select>
        <label for="approver">节点内容</label>

        <input
          class="form-control"
          id="approver"
          v-model="nodeForm.approver.name"
        />

        <!--                <select class="form-control" id="approver" :value="nodeForm.approver.id"-->
        <!--                        @change="handleChangeApprover($event)">-->
        <!--                    <option :value="item.id" :key="'approver-' + item.id" v-for="item in approvers">-->
        <!--                        {{item.name}}-->
        <!--                    </option>-->
        <!--                </select>-->
      </div>
      <div class="footer">
        <button @click="handleClickCancelSaveNode">取消</button>
        <button @click="handleClickSaveNode">确认</button>
      </div>
    </div>
  </div>
</template>
<script>
import "../tool/modal.css";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      default: null
    }
  },
  data: function() {
    return {
      nodeForm: { name: null, id: null, type: null, approver: [] }
      //approvers: [{id: 1, name: '快捷节点1'}, {id: 2, name: '快捷节点2'}, {id: 3, name: '快捷节点3'}],
    };
  },
  methods: {
    handleClickSaveNode() {
      this.$emit(
        "update:node",
        Object.assign(this.node, {
          name: this.nodeForm.name,
          type: this.nodeForm.type,
          approvers: [Object.assign({}, this.nodeForm.approver)]
        })
      );
      this.$emit("update:visible", false);
    },
    handleClickCancelSaveNode() {
      this.$emit("update:visible", false);
    },
    handleChangeApprover(e) {
      this.nodeForm.approver = this.approvers.filter(
        i => i.id === parseInt(e.target.value)
      )[0];
    }
  },
  watch: {
    node: {
      immediate: true,
      handler(val) {
        if (!val) {
          return;
        }
        this.nodeForm.id = val.id;
        this.nodeForm.name = val.name;
        this.nodeForm.type = val.type;
        if (val.approvers && val.approvers.length > 0) {
          this.nodeForm.approver = val.approvers[0];
        }
      }
    }
  }
};
</script>
